.@{navigation-class-name} {
    
    ul {

        &.pills {

            // defaults
            li {

                #ink > #navigation > #gradients > .white;

                a {
                    color: @text-color;
                    background: none;
                    &:hover { background: lighten(@black,85%); }
                } 

                &.active a { background: lighten(@black,85%); }

                &.disabled {
                    a {
                        color: @grey-40;
                        background: fade(@black,0%);
                        #ink > #shadows > .text-shadow (0, 1px, 0, lighten(@grey-40,40%));
                    }
                }

            }

            &.grey {
                li {
                    #ink > #navigation > #gradients > .grey;

                    a { 
                        color: @text-color; 
                        &:hover { background: lighten(@black,70%); }
                    }

                    &.active a { background: lighten(@black,70%); }

                    &.disabled {
                        a {
                            color: @grey-40;
                            background: fade(@black,0%);
                            #ink > #shadows > .text-shadow (0, 1px, 0, lighten(@grey-40,40%));
                        }
                    }                    
                }
            }

            &.black {

                li {
                    #ink > #navigation > #gradients > .black;

                    a { 
                        color: @white; 
                        &:hover { background: lighten(@black,20%); }
                    }

                    &.active a { background: lighten(@black,20%); }

                    &.disabled {
                        a {
                            color: @grey-60;
                            background: fade(@black,0%);
                            #ink > #shadows > .text-shadow (0, -1px, 0, @black);
                        }
                    }
                }
            }

            &.orange {
                li {
                    #ink > #navigation > #gradients > .orange;

                    a { 
                        color: @white; 
                        &:hover { background: darken(@orange,15%); }
                    }

                    &.active a { background: darken(@orange,15%); }
                    
                    &.disabled {
                        a {
                            color: darken(@orange,20%);
                            background: fade(@black,0%);
                            #ink > #shadows > .text-shadow (0, 1px, 0, lighten(@orange,8%));
                        }
                    }
                }
            }

            &.blue {
                li {
                    #ink > #navigation > #gradients > .blue;

                    a { 
                        color: @white;
                        &:hover { background: darken(@blue,15%); }
                    }
                    
                    &.active a { background: darken(@blue,15%); }
                    
                    &.disabled {
                        a {
                            color: darken(@blue,20%);
                            background: fade(@black,0%);
                            #ink > #shadows > .text-shadow (0, 1px, 0, lighten(@blue,8%));
                        }
                    }
                }
            }

            &.green {
                li {
                    #ink > #navigation > #gradients > .green;

                    a { 
                        color: @white; 
                        &:hover { background: darken(@green,15%); }
                    }

                    &.active a { background: darken(@green,15%); }

                    &.disabled {
                        a {
                            color: darken(@green,20%);
                            background: fade(@black,0%);
                            #ink > #shadows > .text-shadow (0, 1px, 0, lighten(@green,6%));
                        }
                    }
                }
            }

            &.red {
                li {
                    #ink > #navigation > #gradients > .red;

                    a { 
                        color: @white;
                        &:hover { background: darken(@red,15%); }
                    }
                    
                    &.active a { background: darken(@red,15%); }

                    &.disabled {
                        a {
                            color: darken(@red,25%);
                            background: fade(@black,0%);
                            #ink > #shadows > .text-shadow (0, 1px, 0, lighten(@red,8%));
                        }
                    }
                }
            }
            
            // removes gradients
            &.flat {

                // default
                li { background: @white; }
                
                // themes
                &.grey li   { background: @grey-15; filter: none; }
                &.black li  { background: @black; filter: none; }
                &.orange li { background: desaturate(@orange,10%); filter: none; }
                &.blue li   { background: desaturate(@blue,10%); filter: none; }
                &.green li  { background: desaturate(@green,10%); filter: none; }
                &.red li    { background: desaturate(@red,10%); filter: none; }  
            }

            // adds rounded corners
            &.rounded li { 
                #ink > #border-radius > .all (@navigation-border-radius); 
                a { #ink > #border-radius > .all (@navigation-border-radius); }
            }

            // adds shadow
            &.shadowed li { #ink > #shadows > .box-shadow (0px, 1px, 2px, 0, fade(@black,30%)); }
            
        }
    }
}